import { computed} from "vue"

// import {butt}
import type {SetupContext} from "vue"

const buttonEmits = {
    click:(evt:MouseEvent)=>evt instanceof MouseEvent
}

export const useButton = (props:any,emit:SetupContext<typeof buttonEmits>['emit'])=>{
    // 判断是否是自定义的color
    let isColor = computed<boolean>(() => {
        return props?.color ? true : false;
      });
      //判断要选泽什么类型
      let cssType = computed<string | undefined>(() => {
        // console.log(isColor.value,"iscolor")
        if (!isColor.value) {
          return props.plain ? `plain-${props.type}` : props.type;
        } else {
          // console.log(props.plain ? "plain-other" : "other");
          return props.plain ? "plain-other" : "other";
        }
      });
  
      //以对象的形式返回样式
      let objTypeStyle = computed<Array<any>>(() => {
        //   console.log(props.circle,"fesfes")
        return [
          props["circle"] ? "circle" : "",
          props["round"] ? "round" : "",
          props["disabled"] ? "disabled" : "",
          props["loading"] ? "loading" : "",
        ].filter((item) => item !== "");
      });
  
      // 样式汇总
      let styleArr = computed<Array<any>>(() => {
        // console.log(...objTypeStyle.value,"fesfes")
        return [
          cssType.value,
          ...objTypeStyle.value,
          props["size"] ? props["size"] : "",
        ];
      });
      // console.log(styleArr.value, "styleArr", cssType.value, props.loading);

      const handler = (evt:MouseEvent)=>{
        emit("click",evt)
      }


      return {
        styleArr,
        handler
      }

}